<template>
  <div class="detail-view">
    <el-button @click="$router.go(-1)">返回</el-button>
    <h1>detail-view{{ $route.params }}</h1>
    <MovieListItem :item="detailItem"></MovieListItem>

    <el-button
      :type="detailItem.collect ? 'danger' : 'info'"
      @click="onCollect"
    >
      {{ detailItem.collect }}收藏按钮
    </el-button>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import MovieListItem from '../components/MovieListItem.vue'
export default {
  components: { MovieListItem },
  computed: {
    ...mapState(['detailItem']),
  },
  // created() {
  //   this.FetchDetail({ detailId: this.$route.params.detailId })
  // },
  // 组件被缓存之后，这个生命周期会生效
  activated() {
    this.FetchDetail({ detailId: this.$route.params.detailId })
  },
  methods: {
    ...mapMutations(['set_collect_item']),
    ...mapActions(['FetchDetail']),
    onCollect() {
      // 点击收藏按钮
      this.set_collect_item()
    },
  },
}
</script>

<style></style>
